<template>
  <div id="app">
    <keep-alive>
      <router-view
      v-if="!$route.meta.notKeepAlive"
      :key="$route.fullPath"
      class="app-view">
      </router-view>
    </keep-alive>
    <router-view
      v-if="$route.meta.notKeepAlive"
      :key="$route.fullPath"
      class="app-view">
    </router-view>
    <chat-footer></chat-footer>
    <chat-message-footer></chat-message-footer>
    {{ pageTransitionName }}
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex';
import ChatFooter from '@/components/chat/Footer';
import ChatMessageFooter from '@/components/chat/MessageFooter';

import * as chatApi from '@/api/chat';

export default {
  name: 'app',
  components: {
    ChatFooter,
    ChatMessageFooter
  },
  created() {
    if (localStorage.getItem('token')) {
      chatApi.socketInit(this);
    }
  },
  computed: {
    ...mapState([
      'pageTransitionName'
    ])
  },
  methods: {
    ...mapActions('chat', [
      'comeMessage',
      'comeWait',
      'setAvigatorNumber'
    ])
  }
};
</script>

<style lang="scss">
@import "assets/style/config";
@import 'assets/style/common/index';
body{
  -webkit-overflow-scrolling:touch;
}
#app{
  // padding-bottom:5.6rem;
}
.app-view{
  position: absolute;
  top: 0;
  right: 0;
  padding-bottom: 5.6rem;
  left: 0;
  height:100%;
  background:$body-background;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  transition: transform .4s cubic-bezier(.55, 0, .1, 1);
  &::-webkit-scrollbar{
    width:0px;
    background:transparent;
  }
  &.slide-left-enter{
    transform:translate(100%, 0)
  }
  &.slide-left-leave-active{
    transform:translate(-100%, 0)
  }

  &.slide-right-enter{
    transform:translate(-100%, 0)
  }
  &.slide-right-leave-active{
    transform:translate(100%, 0)
  }

  // &.fade-enter-active, &.fade-leave-active {
  //   transition: opacity 0s ease;
  // }
  // &.fade-enter, &.fade-leave-to
  // /* .component-fade-leave-active for below version 2.1.8 */ {
  //   opacity: 0;
  // }
}
</style>
